import React, { Component} from 'react';
import { connect } from 'react-redux';
import store from '../../store';
import { Base64 } from 'js-base64';
import { findDOMNode } from 'react-dom';

class containChild extends Component{
    
    activePreview(){
        var _that = this;

        store.dispatch({
            type: 'ACTIVE_FIRST_NAV',
            activeFirstNav: _that.refs.firstnav.innerHTML
        });

        store.dispatch({
            type: 'ACTIVE_SECOND_NAE',
            activeSecondNav: _that.refs.secondnav.innerHTML
        });

        store.dispatch({
            type: 'ACTIVE_RECYCLE',
            activeRecyle: {
                id: $(findDOMNode(this)).attr('data-type'),
                filename : $(findDOMNode(this)).attr('data-names')
            }
        })

        $('.backcover').show();
    }

    revokeRecycle(e){
        this.activePreview();
        store.dispatch({
            type: 'SHOE_RECOKE',
            showRecoke: true
        });

    }

    deleteRecycle(e){
        this.activePreview();
        store.dispatch({
            type: 'SHOW_DELETE',
            showDelete: true
        });
    }

    removeHTMLTag(str) {
            str = str.replace(/<\/?[^>]*>/g,''); //去除HTML tag
            str = str.replace(/[ | ]*\n/g,'\n'); //去除行尾空白
            //str = str.replace(/\n[\s| | ]*\r/g,'\n'); //去除多余空行
            str=str.replace(/&nbsp;/ig,'');//去掉&nbsp;
            return str;
    }

    render(){
        var content = this.removeHTMLTag(Base64.decode(this.props.recycle.content));

        if (this.props.recycle.id === 'deFile') {
            content = '此为文件'
        }
        return (
            <ul className="row delete-child" data-type={this.props.recycle.id} data-names={this.props.recycle.filename}>
                <li className="col-xs-2" ref="secondnav">{ this.props.recycle.secondnav }</li>
                <li className="col-xs-2" ref="firstnav">{ this.props.recycle.firstnav }</li>
                <li className="col-xs-3">{ this.props.recycle.time }</li>
                <li className="col-xs-3">{ content }</li>
                <li className="col-xs-2">
                    <i className="ic-svg ic-delete-red" onClick={this.deleteRecycle.bind(this)}></i>
                    <i className="ic-svg ic-revoke" onClick={this.revokeRecycle.bind(this)}></i>
                </li>
            </ul>
        )
    }
}

const mapStateToProps = (state, ownProps) => {
    return {
        recycleList: state.recycleReducer.recycleList
    }
}

const mapDispatchToProps = (dispatch, ownProps) => {
    return {}
}
export default connect(
    mapStateToProps, 
    mapDispatchToProps
)(containChild);